<template>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <el-checkbox-group v-model="checkList">
      <el-checkbox v-for="(item,i) in roles" :label="item.id" :key="i">{{item.nameZh}}</el-checkbox>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { setUserWithRole, getUserWithRole, getAllRole } from "./api";
export default {
  data() {
    return {
      dialogVisible: false,
      roles: [],
      checkList: [],
      userId: null
    };
  },
  methods: {
    onSubmit() {
      const roleUsers = []
      for(let key of this.checkList){
        roleUsers.push({userId:this.userId,roleId:key})
      }
      if(roleUsers.length>0){
        setUserWithRole(roleUsers).then(v=>{
          if(v.ok){
            this.dialogVisible = false
            this.$message.success('操作成功')
          }else{
            this.$message.error(v.msg||'操作失败')
          }
        })
      }else{
        this.$message.error('请勾选角色信息')
      }
    },
    resetForm() {
      this.$refs["ruleForm"].resetFields();
    },
    showModal(id) {
      this.dialogVisible = true;
      this.userId = id;
      getAllRole().then(v => {
        if (v.ok) {
          this.roles = v.data;
          getUserWithRole(id).then(v => {
            if (v.ok) {
              this.checkList = v.data || [];
            }
          });
        }
      });
    },
    handleClose(e) {
      this.dialogVisible = false;
    }
  }
};
</script>

<style>
</style>